<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        .top
        {
            width: 800px;
            height: 100px;
            margin: 20px auto;
        }
        .top1
        {
            width: 600px;
            height: 60px; 
            /* 边框向内长 */
            box-sizing: border-box;
            border-radius: 5px;
            margin-top: 20px;
        }
        .top2
        {
            width: 200px;
            height: 60px;
            border: none;
            background-color: orange;
            color: white;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .top2:active
        {
            background-color: grey;
        }

        .mid
        {
            width: 800px;
            height: 30px;
            display: flex;
            margin: 0px auto;
        }
        .mid1
        {
            width: 400px;
            height: 30px;
            text-align: center;
            background-color: grey;
            line-height: 30px;
        }

         .original-mid
        {
            width: 800px;
            height: 30px;
            margin: 0px auto;
            text-align: center;/*未完成的水平居中显示*/
        }
        .original-mid1
        {
            display: inline-block;
            width: 400px;
            height: 30px;
            border: none;
            background-color: gray;
            color: white;
            font-style: italic;/*斜体*/
            line-height: 30px;/*未完成的竖直居中显示*/
        } 
        .bottom
        {
            width: 800px;
            margin: 0px auto;
            display: flex;
        }
        .bottom1
        {
            width: 400px;
            display: flex;
            flex-direction: column;/*竖直弹性布局*/
        }
        .bottom2
        {
            width: 400px;
            display: flex;
            flex-direction: column;/*竖直弹性布局*/
        }
        .bottom11
        {
            width: 400px;
            display:flex;
            justify-content: space-between;/*左右靠边缘布局*/
        }

       
    


    </style>
</head>
<body>
    <div class="top">
        <input type="text" class="top1"><input type="button" class="top2" value="新建任务" onclick="makenewtask()">
    </div>

    <div class="mid">
        <span class="mid1">未完成</span><span class="mid1">已完成</span>
    </div>

    <div class="bottom">
        <span class="bottom1">
            <span class="bottom11">
                <span><input type="checkbox" onclick="Move(this)">吃饭</span><input type="button" value="删除" onclick="Delete(this)">
            </span>
            <span class="bottom11">
                <span><input type="checkbox" onclick="Move(this)">睡觉</span><input type="button" value="删除" onclick="Delete(this)">
            </span>

        </span>

        <span class="bottom2">


        </span>
        




    </div>
    
</body>
<script>
    function Move(elem)
    {
        let father=elem.parentNode
        let ffather=father.parentNode
        let oldfather=ffather.parentNode
        oldfather.removeChild(ffather)
        if(elem.checked==true)
        {
            let newfather=document.querySelector('.bottom2')
            newfather.appendChild(ffather)
        }
        else
        {
            let newfather=document.querySelector('.bottom1')
            newfather.appendChild(ffather)
        }
    }

    function Delete(elem)
    {
        let father=elem.parentNode
        let grandfather=father.parentNode
        grandfather.removeChild(father);


    }


    function makenewtask()
    {
        let getwhat=document.querySelector('.top1')
        let what=getwhat.value;
        getwhat.value=''
        let thewhat=document.createElement('span')
        thewhat.innerHTML=what;
        console.log(what)
        if(what=='')return;
        let newnode=document.createElement('span')
        newnode.className='bottom11'
        let new1=document.createElement('span')
        let todo=document.createElement('input')
        
        todo.type='checkbox';


        todo.onclick=function()
        {
            Move(todo)
        }

        
        let del=document.createElement('input')
        del.type='button';
        del.value="删除"
        del.onclick=function() {
            Delete(del)
        }
        new1.appendChild(todo)
        new1.appendChild(thewhat)

        newnode.append(new1)
        newnode.appendChild(del)
        console.log(newnode)

        let all=document.querySelector('.bottom1')
        all.appendChild(newnode)


    }
</script>
</html>